<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<body>

<!-- 1、Jquery组件引用*@ -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jsp/shiro/manager/jquery-1.10.2.min.js"></script>
<!-- 2、bootstrap组件引用 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jsp/shiro/manager/bootstrap.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/jsp/shiro/manager/bootstrap.min.css" />
<!-- 3、bootstrap table组件以及中文包的引用 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jsp/shiro/manager/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/jsp/shiro/manager/bootstrap-table.min.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/jsp/shiro/manager/bootstrap-table-zh-CN.min.js"></script>

<table id="ArbetTable"></table>

<script type="text/javascript">
	$(function () {
		//1.初始化Table
		var oTable = new TableInit();
		oTable.Init();
	});
	
	var TableInit = function () {
	    var oTableInit = new Object();
	    //初始化Table
	    oTableInit.Init = function () {
	        $('#ArbetTable').bootstrapTable({
	            url: '${pageContext.request.contextPath}/manage/getData',			//请求后台的URL
	            method: 'get',                      //请求方式
	            toolbar: '#toolbar',                //工具按钮用哪个容器
	            striped: false,                      //是否显示行间隔色，表格显示条纹，默认为false
	            cache: false,                       // 设置为 false 禁用 AJAX 数据缓存， 默认为true
	            pagination: true,                   // 在表格底部显示分页组件，默认false
	            sortable: true,					//是否启用排序
	            sortOrder: "asc",                   //排序方式
	            queryParams: oTableInit.queryParams,//传递参数
	            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页
	            pageNumber: 1,						//初始化加载第一页，默认第一页
	            pageSize: 10,                       //每页的记录行数
	            pageList: [10, 25, 50, 100],        //可供选择的每页的行数
	            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
	            contentType: "application/x-www-form-urlencoded",
	            strictSearch: true,
	            showColumns: true,                  //是否显示所有的列
	            showRefresh: true,                  //是否显示刷新按钮
	            minimumCountColumns: 2,             //最少允许的列数
	            clickToSelect: true,                //是否启用点击选中行
	            height: 700,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
	            uniqueId: "no",                     //每一行的唯一标识，一般为主键列
	            showToggle: true,					//是否显示详细视图和列表视图的切换按钮
	            cardView: false,                    //是否显示详细视图
	            detailView: false,                   //是否显示父子表
	            columns: [
	            {
	            	checkbox:true,					// 显示一个勾选框
	            	align:'center'					// 居中显示
	            },
	            {
	                field: 'id',					// 返回json数据中的name,注意是区分大小写的
	                title: 'id',					// 表格表头显示文字
	                align: 'center', 				// 左右居中
	                valign: 'middle' 				// 上下居中
	            }, {
	                field: 'name',
	                title: '名字'
	            }, {
	                field: 'sex',
	                title: '性别'
	            },
	            {
	                field: 'operate',
	                title: '操作',
	                align: 'center',
	                valign: 'middle',
	                width: 400, 					// 定义列的宽度，单位为像素px
	                formatter: operateFormatter 	// 自定义方法，添加操作按钮
	            },
	            ],
	            onLoadSuccess: function(){			// 加载成功时执行
	            	console.info("加载成功");
	         	},
	         	onLoadError: function(){			// 加载失败时执行
	         		console.info("加载数据失败");
	          	},

	            
	            
	            rowStyle: function (row, index) {
	                var classesArr = ['success', 'info'];
	                var strclass = "";
	                if (index % 2 === 0) {//偶数行
	                    strclass = classesArr[0];
	                } else {//奇数行
	                    strclass = classesArr[1];
	                }
	                return { classes: strclass };
	            },//隔行变色
	        });

	    };


	    //得到查询的参数
	    oTableInit.queryParams = function (params) {
	        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
	            limit: params.limit,   //页面大小
	            offset:params.offset
	        };
	        return temp;
	    };
	    return oTableInit;
	};


	function operateFormatter(value, row, index) {//赋予的参数
	    return [
	        '<a class="btn active disabled" href="#">查看</a>',
	        '<a class="btn active" href="#">编辑</a>',
	        '<a class="btn btn-default" href="#">重置密码</a>',
	        '<a class="btn active" href="#">删除</a>',
	        '<a class="btn active" href="#">冻结</a>'
	    ].join('    ');
	}
	
	
</script>


</body>

</html>